'use client'

import { ReactNode, useState } from 'react'
import { 
  Box, 
  Flex, 
  Text, 
  Icon, 
  useColorModeValue 
} from '@chakra-ui/react'
import { FiChevronDown, FiChevronRight } from 'react-icons/fi'

interface CollapsibleSectionProps {
  title: string;
  children: ReactNode;
  defaultIsOpen?: boolean;
}

export const CollapsibleSection = ({ 
  title, 
  children, 
  defaultIsOpen = true 
}: CollapsibleSectionProps) => {
  const [isOpen, setIsOpen] = useState(defaultIsOpen)
  const titleColor = useColorModeValue('gray.500', 'gray.400')
  
  return (
    <Box mb={4}>
      {/* 标题栏 */}
      <Flex 
        alignItems="center" 
        cursor="pointer" 
        onClick={() => setIsOpen(!isOpen)}
        py={2}
        px={3}
      >
        <Icon 
          as={isOpen ? FiChevronDown : FiChevronRight} 
          mr={2} 
          color={titleColor}
        />
        <Text 
          fontWeight="bold" 
          fontSize="sm" 
          color={titleColor}
          textTransform="uppercase"
          letterSpacing="wider"
        >
          {title}
        </Text>
      </Flex>

      {/* 内容区域 */}
      <Box 
        overflow="hidden" 
        maxH={isOpen ? "1000px" : "0px"} 
        transition="max-height 0.3s ease-in-out"
      >
        {children}
      </Box>
    </Box>
  )
} 